<template>
	<view class="staging">
		<view class="bgColor dFlex flexDirection jCenter_aCenter">
			<view class="tools dFlex jAround_aCenter">
				<view class="toolOne"> 
					<text>预计收入(元)</text>
					<view class="toolNum">{{give_amount?give_amount:'0.00'}}</view>
				</view>
				<view class="toolOne">
					<text>累计收入(元)</text> 
					<view class="toolNum">{{total?total:'0.00'}}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="menus dFlex jAround_aCenter">
				<view :class="['menuOne',order_status==''?'active':'']" @tap='changeMenu()'>
					<text>全部</text>
					<view class="line"></view>
				</view>
				<view :class="['menuOne',order_status=='3'?'active':'']" @tap='changeMenu(3)'>
					<text>待上门</text>
					<view class="line"></view> 
				</view>
				<view :class="['menuOne',order_status=='4'?'active':'']" @tap='changeMenu(4)'>
					<text>进行中</text>
					<view class="line"></view>
				</view>
				<view :class="['menuOne',order_status=='5'?'active':'']" @tap='changeMenu(5)'>
					<text>已完成</text>
					<view class="line"></view>
				</view>
			</view>
			<view class='list' v-if="list.length">
				<view class='order' v-for="(item,index) in list" :key='index' @tap.stop='lookDetail(item.orderId)'>
					<view class='general dFlex jBetween_aCenter'>
						<view class='infoLeft dFlex jStart_aCenter'>
							<view class='kind sty1' v-if="item.order_type == '1'">免拆清洗</view>
							<view class='kind sty2' v-if="item.order_type == '2'">拆装清洗</view>
							<view class='flour'>{{item.address}}</view>
							<!-- <view class='time'>18:00前到达</view> -->
						</view>
						<view class='status sty1' v-if="item.order_status == '3'">待上门</view>
						<view class='status sty2' v-if="item.order_status == '4'">进行中</view>
						<view class='status sty3' v-if="item.order_status == '5'">已完成</view>
					</view>
					<view class="info">
						<view class="user dFlex jBetween_aCenter">
							<view class="userInfo">
								<text>{{item.trueName}}</text>
								<text class="phone">尾号{{item.tel.substr(-4)}}</text>
							</view>
							<view class="callIcon imgPublic" @tap.stop='call(item.tel)'>
								<image src="https://wx.gdxixiashi.com/public/images/worker/dianhua@2x.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="line dFlex jStart_aStart" @click="copy(item.area+item.address)">
							<view>上门地址：</view>
							<text>{{item.area+item.address}} <text style="color:#1d69ff;margin-left:10px;">复制</text></text>
							
						</view>
						<view class="line dFlex jStart_aStart">
							<view>上门时间：</view>
							<text>{{item.order_time}}</text>
						</view>
						<view class="line dFlex jStart_aStart">
							<view>下单时间：</view>
							<text>{{item.pay_time}}</text>
						</view>
						<view class="line dFlex jStart_aStart">
							<view>服务人员：</view>
							<text>{{item.store_name}}</text>
						</view>
						<view class="line dFlex jStart_aStart">
							<view>清洗方式：</view>
							<text>{{item.order_type == '1'?'免拆清洗':"拆装清洗"}}</text>
						</view>
						<view class="line dFlex jStart_aStart">
							<view>产品规格：</view>
							<!-- <text>{{item.spec}}</text> -->
							<view class='shops'>
								<view class="shopOne dFlex jStart_aStart" v-for="(item2,index2) in item.products" :key='index2'>
									<view class="shopImg imgPublic">
										<image :src="item2.list_img"></image>
									</view>
									<view class="shopInfo">
										<view class="shopname">{{item2.product_name}}</view>
										<view class='spec'>{{item2.specs_name}} x{{item2.num}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="orderLine dFlex jBetween_aCenter">
						<text>订单金额</text>
						<view class="lineVal sty1">￥<text>{{item.product_total}}</text></view>
					</view>
					<view class="orderLine dFlex jBetween_aCenter">
						<text>本单预计收入</text>
						<view class="lineVal">￥{{item.give_amount}}</view>
					</view>
					<view class="btns dFlex jEnd_aCenter">
						<!-- 进行中 -->
						<!-- <view class="btn sty1" v-if="item.order_status == '4'">确认完成</view> -->
						<!-- 进行中 待上门-->
						<view class="btn sty2" @tap.stop='appendMy(item.orderId)' v-if="item.order_status == '3' || item.order_status == '4'">修改费用</view>
						<!-- 进行中 待上门-->
						<!-- <view class="btn sty3" @tap.stop='tuikuan' v-if="item.order_status == '3' || item.order_status == '4'">部分退款</view> -->
						<!-- 待上门 -->
						<view class="btn sty3" v-if="item.order_status == '3'" @tap.stop='cancelOrder(item.orderId)'>取消订单</view>
					</view>
				</view>
			</view>
			<view class="list empty imgPublic" v-else>
				<image src="../static/images/empty.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="seat"></view>
		<!-- 追加费用弹窗 -->
		<view class="zz dFlex jCenter_aCenter" v-if="appendFlag">
			<view class="appendMy">
				<view class="title">修改费用</view> 
				<view class='content'>
					<view class="line dFlex jStart_aCenter" style="margin-bottom: 10px;">
						<text>类型</text>
						<view class='ipt' style="background: white;">
							<radio-group class="uni-flex uni-row radio-group" v-model="change_type" style="flex-wrap: wrap;" @change="changeType">
								<radio value="1" class="radio" style="margin-right: 10px;" color='#2d67d2' :checked="change_type=='1'?true:false">追加</radio>
							    <radio value="2" class="radio" color='#2d67d2' :checked="change_type=='2'?true:false">退回</radio>
							</radio-group>
						</view>
					</view>
					<view class="line dFlex jCenter_aCenter">
						<text>金额</text>
						<view class='ipt'>
							<input type="number" v-model="amount" placeholder="请输入金额">
						</view>
					</view>
				</view>
				<view class="btns dFlex jBetween_aCenter">
					<view class='btn' @tap='appendFlag = false'>取消</view>
					<view class='btn sure' @tap='appendOrder'>确定</view>
				</view>
			</view>
		</view>
		<tabbar actIdx='0' ref='tabbar' identity='2' :qCount='qCount'></tabbar>
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				appendFlag:false,
				datas:{},
				order_status:'',//不传是全部 3待上门4进行中5已完成
				list:[],
				page:1,
				load:false,
				
				give_amount:'',     
				total:'',
				
				appendId:'',//需要追加的订单
				amount:'',//追加的费用
				change_type:1,//1追加 2减少
				// 抢单的数量
				qCount:0,
			};
		},
		onLoad() {
			
		},
		onShow() {
			if(uni.getStorageSync('storeId')){
				this.page = 1;
				this.initList();
				this.initStaff();
			}else{
				uni.setStorageSync('identify',1);
				uni.switchTab({
					url:'/pages/home'
				})
			}
		},
		onReachBottom(){
			if(this.load){
				this.load = false;
				this.page ++;
				this.initList();
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		watch:{
			"$store.state.count": {
				//深度监听，可监听到对象、数组的变化
				handler(val,oldVal) {
					this.qCount = val;
				},
				deep: true, //true 深度监听
			},
		},
		methods:{
			// 复制文案
			copy(content){
				console.log(content);
				uni.setClipboardData({
					data:content,
				})
			},
			// 修改费用类型
			changeType(e){
				this.change_type = e.detail.value;
			},
			initStaff(){
				this.tool.getStaffInfo().then(res=>{
					console.log(res);
					if(res){
						this.qCount = res.jiedan;
						this.datas = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			initList(){
				this.tool.getData('Store/orderList',{
					storeId:uni.getStorageSync('storeId'),
					order_status:this.order_status,
					page:this.page,
				}).then(res=>{
					console.log(res);
					if(res){
						this.give_amount = res.give_amount;
						this.total = res.total;
						res.list.map((item,index)=>{
							item.spec = '';
							item.products.map((item2,index2)=>{
								item.spec = index2 == item.products.length-1?item.spec+item2.specs_name:item.spec+item2.specs_name+'、';
							})
						})
						this.list = this.page == '1'?res.list:this.list.concat(res.list);
						this.load = res.list.length >= 10 ? true : false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 取消订单
			cancelOrder(orderId){
				uni.showModal({
					content:'确定取消该订单？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('Store/orderChange',{
								type:1,
								orderId:orderId
							}).then(res=>{
								console.log(res);
								if(res){
									this.page = 1;
									this.initList();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			// 拨打电话
			call(tel){
				uni.makePhoneCall({
					phoneNumber:tel,
				})
			},
			// 切换菜单
			changeMenu(status){
				this.order_status = status?status:'';
				this.page = 1;
				this.initList();
			},
			// 追加金额
			appendMy(orderId){
				this.appendId = orderId;
				this.appendFlag = true;
			},
			// 订单追加费用
			appendOrder(){
				uni.showModal({
					content:'确定修改该订单费用？',
					success: (op) => {
						if(op.confirm){
							if(!this.amount){
								uni.showToast({
									title:'修改的费用不能为空',
									icon:"none"
								})
								return;
							}
							this.tool.getData('Store/orderChange',{
								type:'2',
								orderId:this.appendId,
								amount:this.amount,
								change_type:this.change_type,
							}).then(res=>{
								console.log(res);
								if(res){
									uni.showToast({
										title:'修改成功',
										icon:"success"
									})
									this.appendFlag = false;
									this.page = 1;
									this.initList();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			// 订单详情
			lookDetail(orderId){
				uni.navigateTo({
					url:'/staging/orderDetail?orderId='+orderId
				})
			},
			// 部分退款
			tuikuan(){
				uni.navigateTo({
					url:'/staging/refund'
				})
			},
		}
	}
</script>

<style lang="scss">
	.staging{
		width: 100%;
		.zz{
			.appendMy{
				width: 86%;
				background: white;
				border-radius: 5px;
				overflow: hidden;
				.btns{
					width: 100%;
					border-top: 1px solid #DDDDDD;
					.btn{
						flex:1;
						text-align: center;
						color: #666666;
						padding: 12px 0;
						letter-spacing: 4px;
					}
					.sure{
						color: white;
						background: linear-gradient(0deg,#2d67d2 0%, #609ff8 100%);
					}
				}
				.content{
					width: 100%;
					padding: 12px 24px 20px;
					box-sizing: border-box;
					color:#666666;
					.ipt{
						flex: 1;
						margin-left: 12px;
						padding:12px;
						box-sizing: border-box;
						border-radius: 4px;
						background: rgba(160, 160,160, 0.1);
					}
				}
				.title{
					width: 100%;
					padding: 16px 0;
					font-size: 18px;
					font-weight: bold;
					color: #666666;
					text-align:center;
				}
			}
		}
		.content{
			width: 100%;
			padding:0 3%;
			box-sizing: border-box;
			.list{
				width: 100%;
				.order{
					width: 100%;
					padding:12px 16px 12px 0;
					box-sizing:border-box;
					background:white;
					margin-bottom:12px;
					.btns{
						width: 100%;
						.btn{
							width: max-content;
							padding: 4px 12px;
							border-radius: 50px;
							margin-left:12px;
							border: 1px solid transparent;
						}
						.sty1{
							color: white;
							background: linear-gradient(0deg,#2d67d2 0%, #609ff8 100%);
						}
						.sty2{
							border-color: #2d67d2;
							color: #2d67d2;
						}
						.sty3{
							color: #999999;
							border-color: #999999;
						}
					}
					.orderLine{
						width: 100%;
						margin-bottom: 10px;
						color: #222222;
						padding: 0 0 0 16px;
						box-sizing: border-box;
						.lineVal{
							font-size: 16px;
						}
						.sty1{
							font-size: 12px;
							color: #FF3B2F;
							text{
								font-size: 18px;
							}
						}
					}
					.orderLine:last-child{
						margin: 0;
					}
					.info{
						width: 100%;				
						padding: 30px 0 30px 16px;
						box-sizing: border-box;
						.line{
							font-size: 12px;
							color: #999999;
							margin-top: 10px;
							.shops{
								flex:1;
								.shopOne{
									width:100%;
									margin-bottom: 12px;
									.shopInfo{
										flex:1;
										.shopname{
											color:#333333;
											margin-bottom:6px;
											font-size:14px;
										}
									}
									.shopImg{
										width: 40px;
										height: 40px;
										border-radius: 5px;
										overflow: hidden;
										margin-right: 12px;
										image{
											width:100%;
											height:100%;
										}
									}
								}
								.shopOne:last-child{
									margin: 0;
								}
							}
							text{
								flex: 1;
								font-size: 15px;
								color: #000033;
							}
						}
						.user{
							font-weight: bold;
							.phone{
								margin-left: 6px;
							}
							.userInfo{
								flex: 1;
							}
							.callIcon{
								width: 16px;
							}
						}
					}
					.general{
						width: 100%;
						.infoLeft{
							flex: 1;
							.kind{
								color: white;
								width: max-content;
								border-radius: 0 50px 50px 0;
								background: linear-gradient(to right,#2D67D2,#609FF8);
								padding: 4px 10px;
								font-size: 11px;
							}
							.sty1{
								background: linear-gradient(to right,#2D67D2,#609FF8);
							}
							.sty2{
								background: linear-gradient(-45deg,#ffa132 0%, #ff5400 100%);
							}
							.flour{
								flex: 1;
								font-size: 18px;
								margin: 0 10px;
								font-weight: bold;
							}
						}
						.status{
							width:max-content;
							font-size: 12px; 
							padding:5px;
							border-radius:5px;
						}
						>.sty1{
							color:#F8711F;
							background:#fef1e9;
						}
						>.sty2{
							color: #2D67D2;
							background: #ebf0fa;
						}
						>.sty3{
							color: #999999;
							background: #f5f5f5;
						}
					}
				}
			}
			.menus{
				width: 100%;
				padding: 12px 0;
				.menuOne{
					flex: 1;
					text-align: center;
					font-weight: bold;
					.line{
						width: 21px;
						height: 2px;
						border-radius: 50px;
						margin: 7px auto 0;
						background: none;
					}
				}
				.active{
					// color: #1664FF;
					.line{
						background: #1664FF;
					}
				}
			}
		}
		.bgColor{
			width: 100%;
			background: linear-gradient(0deg,#609ff8 0%, #2d67d2 100%);
			// height: calc(195px - var(--status-bar-height) - 57px);
			// padding: 16px 0 20px;
			color: white;
			font-size: 16px;
			.tools{
				width: 90%;
				margin: 12px auto 20px;
				.toolOne{
					flex: 1;
					font-size: 14px;
					.toolNum{
						font-size: 18px;
						margin-top: 4px;
					}
				}
			}
		}
	}
</style>
